<!--
 * @copyright 2025 银杏ERP
 * @author 银杏ERP
 * @version 1.0
 * @license http://www.hhyx.xyz
 * @developer Lhf
-->

<template>
    <el-card shadow="hover" class="recent-operations-card">
        <template #header>
            <div class="card-header">
                <div class="title-with-icon">
                    <Icon name="fa fa-history" class="title-icon" />
                    <span>{{ t('最近业务动态') }}</span>
                </div>
                <div class="header-actions">
                    <el-radio-group v-model="operationType" size="small" @change="changeOperationType">
                        <el-radio-button label="all">{{ t('全部') }}</el-radio-button>
                        <el-radio-button label="inbound">{{ t('入库') }}</el-radio-button>
                        <el-radio-button label="outbound">{{ t('出库') }}</el-radio-button>
                        <el-radio-button label="transfer">{{ t('调拨') }}</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        </template>
        <div v-loading="loading" class="operations-list">
            <div v-if="operationsList.length === 0" class="empty-data">
                <Icon name="fa fa-inbox" class="empty-icon" />
                <span>{{ t('暂无相关操作记录') }}</span>
            </div>
            <div v-else>
                <el-timeline>
                    <el-timeline-item v-for="(op, index) in operationsList" :key="index" :type="getTimelineType(op.type)" :color="getTimelineColor(op.type)" :hollow="op.status === 'pending'" :timestamp="op.time" placement="top">
                        <div class="operation-item">
                            <div class="operation-header">
                                <div class="operation-title">
                                    <span class="type-badge" :class="getTypeBadgeClass(op.type)">{{ getOperationTypeText(op.type) }}</span>
                                    <span class="operation-name">{{ op.title }}</span>
                                </div>
                                <el-tag size="small" :type="getStatusType(op.status)">{{ getStatusText(op.status) }}</el-tag>
                            </div>
                            <div class="operation-content">
                                <div class="content-item">
                                    <span class="label">{{ t('单号') }}:</span>
                                    <span class="value">{{ op.orderNo }}</span>
                                </div>
                                <div class="content-item">
                                    <span class="label">{{ t('操作人') }}:</span>
                                    <span class="value">{{ op.operator }}</span>
                                </div>
                                <div class="content-item operation-products">
                                    <div class="product-brief">
                                        <span>{{ `共 ${op.productCount} 个品项，合计 ${op.totalQuantity} 件商品` }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="operation-footer">
                                <el-button link type="primary" size="small" @click="viewDetail(op)">
                                    {{ t('查看详情') }}
                                </el-button>
                                <div v-if="op.status === 'pending'" class="pending-actions">
                                    <el-button link type="success" size="small" @click="approveOperation(op)">
                                        {{ t('批准') }}
                                    </el-button>
                                    <el-button link type="danger" size="small" @click="rejectOperation(op)">
                                        {{ t('拒绝') }}
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-timeline-item>
                </el-timeline>
                
                <div class="view-more">
                    <el-button link type="info" size="small" @click="viewMore">
                        {{ t('查看更多') }} <Icon name="fa fa-angle-double-right" />
                    </el-button>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import Icon from '/@/components/icon/index.vue'

const { t } = useI18n()
const loading = ref(false)
const operationType = ref('all')

// 模拟业务操作数据
const allOperations = [
    {
        id: 1,
        type: 'inbound',
        title: '办公用品入库',
        status: 'completed',
        time: '2024-02-25 14:30',
        orderNo: 'IN20240225001',
        operator: '张三',
        warehouse: '总仓',
        productCount: 5,
        totalQuantity: 120,
        products: [
            { name: 'A4纸', quantity: 50 },
            { name: '圆珠笔', quantity: 30 },
            { name: '订书机', quantity: 15 },
            { name: '文件夹', quantity: 20 },
            { name: '记事本', quantity: 5 }
        ]
    },
    {
        id: 2,
        type: 'outbound',
        title: '销售出库-京东订单',
        status: 'completed',
        time: '2024-02-25 11:15',
        orderNo: 'OUT20240225003',
        operator: '李四',
        warehouse: '北京仓',
        productCount: 3,
        totalQuantity: 5,
        products: [
            { name: '显示器', quantity: 2 },
            { name: '键盘', quantity: 2 },
            { name: '鼠标', quantity: 1 }
        ]
    },
    {
        id: 3,
        type: 'transfer',
        title: '调拨至上海仓',
        status: 'pending',
        time: '2024-02-25 09:45',
        orderNo: 'TR20240225002',
        operator: '王五',
        warehouse: '总仓',
        productCount: 2,
        totalQuantity: 30,
        products: [
            { name: '打印机墨盒', quantity: 10 },
            { name: '投影仪', quantity: 20 }
        ]
    },
    {
        id: 4,
        type: 'inbound',
        title: '电子设备入库',
        status: 'completed',
        time: '2024-02-24 16:20',
        orderNo: 'IN20240224005',
        operator: '赵六',
        warehouse: '深圳仓',
        productCount: 4,
        totalQuantity: 45,
        products: [
            { name: '笔记本电脑', quantity: 5 },
            { name: '平板电脑', quantity: 10 },
            { name: '移动硬盘', quantity: 20 },
            { name: '蓝牙耳机', quantity: 10 }
        ]
    },
    {
        id: 5,
        type: 'outbound',
        title: '办公室领用',
        status: 'completed',
        time: '2024-02-24 10:30',
        orderNo: 'OUT20240224002',
        operator: '张三',
        warehouse: '总仓',
        productCount: 3,
        totalQuantity: 15,
        products: [
            { name: '咖啡', quantity: 5 },
            { name: '纸杯', quantity: 8 },
            { name: '茶包', quantity: 2 }
        ]
    },
    {
        id: 6,
        type: 'transfer',
        title: '调拨至广州仓',
        status: 'rejected',
        time: '2024-02-23 15:45',
        orderNo: 'TR20240223001',
        operator: '李四',
        warehouse: '总仓',
        productCount: 1,
        totalQuantity: 50,
        products: [
            { name: '会议椅', quantity: 50 }
        ]
    }
]

const operationsList = ref(allOperations)

// 切换操作类型
const changeOperationType = () => {
    loading.value = true
    
    // 模拟加载过程
    setTimeout(() => {
        if (operationType.value === 'all') {
            operationsList.value = allOperations
        } else {
            operationsList.value = allOperations.filter(op => op.type === operationType.value)
        }
        loading.value = false
    }, 500)
}

// 获取操作类型文本
const getOperationTypeText = (type: string): string => {
    const typeMap: Record<string, string> = {
        inbound: t('入库'),
        outbound: t('出库'),
        transfer: t('调拨')
    }
    return typeMap[type] || type
}

// 获取状态文本
const getStatusText = (status: string): string => {
    const statusMap: Record<string, string> = {
        completed: t('已完成'),
        pending: t('待审核'),
        rejected: t('已拒绝')
    }
    return statusMap[status] || status
}

// 获取时间线类型
const getTimelineType = (type: string): 'primary' | 'success' | 'warning' | 'danger' | 'info' => {
    const typeMap: Record<string, 'primary' | 'success' | 'warning' | 'danger' | 'info'> = {
        inbound: 'primary',
        outbound: 'success',
        transfer: 'warning'
    }
    return typeMap[type] || 'info'
}

// 获取时间线颜色
const getTimelineColor = (type: string): string => {
    const colorMap: Record<string, string> = {
        inbound: '#409EFF',
        outbound: '#67C23A',
        transfer: '#E6A23C'
    }
    return colorMap[type] || ''
}

// 获取状态标签类型
const getStatusType = (status: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
    const statusMap: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
        completed: 'success',
        pending: 'warning',
        rejected: 'danger'
    }
    return statusMap[status] || 'info'
}

// 获取类型徽章样式
const getTypeBadgeClass = (type: string): string => {
    const classMap: Record<string, string> = {
        inbound: 'type-inbound',
        outbound: 'type-outbound',
        transfer: 'type-transfer'
    }
    return classMap[type] || ''
}

// 查看详情
const viewDetail = (op: any) => {
    ElMessage.info(`查看操作详情: ${op.orderNo}`)
}

// 批准操作
const approveOperation = (op: any) => {
    ElMessage.success(`已批准操作: ${op.orderNo}`)
    updateOperationStatus(op.id, 'completed')
}

// 拒绝操作
const rejectOperation = (op: any) => {
    ElMessage.warning(`已拒绝操作: ${op.orderNo}`)
    updateOperationStatus(op.id, 'rejected')
}

// 更新操作状态
const updateOperationStatus = (id: number, status: string) => {
    // 更新所有操作列表
    allOperations.forEach(op => {
        if (op.id === id) {
            op.status = status
        }
    })
    
    // 更新当前显示列表
    operationsList.value = operationsList.value.map(op => {
        if (op.id === id) {
            return { ...op, status }
        }
        return op
    })
}

// 查看更多
const viewMore = () => {
    ElMessage.info(t('跳转到业务操作列表页面'))
}

// 初始化
loading.value = true
setTimeout(() => {
    loading.value = false
}, 600)
</script>

<style scoped lang="scss">
.recent-operations-card {
    margin-bottom: 20px;
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title-with-icon {
            display: flex;
            align-items: center;
            
            .title-icon {
                color: #606266;
                margin-right: 8px;
                font-size: 16px;
            }
        }
        
        .header-actions {
            display: flex;
            align-items: center;
        }
    }
    
    .operations-list {
        min-height: 300px;
        
        .operation-item {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 5px;
            transition: all 0.3s;
            
            &:hover {
                background-color: #f0f2f5;
            }
            
            .operation-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                
                .operation-title {
                    display: flex;
                    align-items: center;
                    
                    .type-badge {
                        display: inline-block;
                        padding: 2px 8px;
                        border-radius: 4px;
                        font-size: 12px;
                        margin-right: 8px;
                        
                        &.type-inbound {
                            background-color: rgba(64, 158, 255, 0.1);
                            color: #409EFF;
                        }
                        
                        &.type-outbound {
                            background-color: rgba(103, 194, 58, 0.1);
                            color: #67C23A;
                        }
                        
                        &.type-transfer {
                            background-color: rgba(230, 162, 60, 0.1);
                            color: #E6A23C;
                        }
                    }
                    
                    .operation-name {
                        font-weight: bold;
                        font-size: 14px;
                    }
                }
            }
            
            .operation-content {
                margin-bottom: 10px;
                
                .content-item {
                    font-size: 13px;
                    margin-bottom: 3px;
                    
                    .label {
                        color: #909399;
                        margin-right: 5px;
                    }
                    
                    &.operation-products {
                        margin-top: 5px;
                        
                        .product-brief {
                            background-color: rgba(0, 0, 0, 0.02);
                            padding: 5px 10px;
                            border-radius: 4px;
                            font-size: 12px;
                            color: #606266;
                        }
                    }
                }
            }
            
            .operation-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .pending-actions {
                    display: flex;
                    gap: 10px;
                }
            }
        }
        
        .empty-data {
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #909399;
            
            .empty-icon {
                font-size: 48px;
                color: #dcdfe6;
                margin-bottom: 10px;
            }
        }
        
        .view-more {
            text-align: center;
            margin-top: 15px;
        }
    }
}

@media screen and (max-width: 768px) {
    .recent-operations-card {
        .card-header {
            flex-direction: column;
            align-items: flex-start;
            
            .header-actions {
                margin-top: 10px;
            }
        }
    }
}
</style> 